<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--优先使用IE最新版本和Chrome-->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1" />
		<!--视口--设备宽度--初始缩放比例--最小缩放比例--最大缩放比例--用户缩放-->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--禁止浏览器自动的识别-电话号码-email--->
		<meta name="format-detection" content="telephone=no,email=no"/>
		<!--是否启用Web全屏-->
		<meta name="apple-mobile-web-app-capable" content='yes' />
		<!--设置苹果工具栏颜色-->
		<meta name="apple-mobile-web-app-status-bar-style" content='black' />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/Consumption details.css"/>
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script src="../js/zepto.min.js"></script>
		<script src="../js/index.js"></script>
		<link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css"/>
	</head>
	<body>
		<header>
			<a href="zhxx.html">
				<i class="icon iconfont icon-back"></i>
			</a>
			<p id="oP">消费详情▼</p>
		</header>
		<div class="content">
			<div class="data">
				<div>2016年7月15日</div>
				<div>总消费1528条</div>
			</div>
			<ul class="list">
				<li>
					<div class="orange">闪</div>
					<div>
						<p><span class="bor1">天天消消乐</span> &nbsp;闪注量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="green">-1条</div>
				</li>
				<li>
					<div class="red">短</div>
					<div>
						<p><span class="bor2">大话西游</span> &nbsp;短信量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="red1">-1条</div>
				</li>
				<li>
					<div class="red">短</div>
					<div>
						<p><span class="bor1">天天消消乐</span> &nbsp;闪注量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="red1">-1条</div>
				</li>
				<li>
					<div class="orange">闪</div>
					<div>
						<p><span class="bor3">王者荣耀</span> &nbsp;闪注量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="green">-1条</div>
				</li>
			</ul>
			<div class="two">2016年7月14</div>
			<ul class="list">
				<li>
					<div class="red">短</div>
					<div>
						<p><span class="bor2">大话西游</span> &nbsp;短信量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="red1">-1条</div>
				</li>
				<li>
					<div class="orange">闪</div>
					<div>
						<p><span class="bor3">王者荣耀</span> &nbsp;闪注量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="green">-1条</div>
				</li>
				<li>
					<div class="orange">闪</div>
					<div>
						<p><span class="bor1">天天消消乐</span> &nbsp;闪注量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="green">-1条</div>
				</li>
				
				<li>
					<div class="red">短</div>
					<div>
						<p><span class="bor3">王者荣耀</span> &nbsp;闪注量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="red1">-1条</div>
				</li>
			</ul>
			<div class="two three">2016年7月13</div>
			<ul class="list">
				<li class="list_under">
					<div class="red">短</div>
					<div>
						<p><span class="bor1">天天消消乐</span> &nbsp;短信量消费</p>
						<p>2016/7/6 14:24</p>
					</div>
					<div class="red1">-1条</div>
				</li>
			</ul>
		</div>
		<div class="bj"></div>
			
		<div class="down">
				<a href="#" class="btn1">全部账户</a>
				<div class="yingyong">
					应用
				</div>
				<div class="btns">
					<a href="#">天天消消乐</a>
					<a href="#">大话西游</a>
					<a href="#">王者荣耀</a>
				</div>
			</div>
	</body>
	<script>
		(function(win,doc){
		//浏览器缩放时
		win.onresize=function(){
			change();	
		};
		change();
		function change(){
			var oFs=doc.documentElement.clientWidth/(320/20);
	    
			//设置根目录字体大小
			doc.documentElement.style.fontSize=oFs+'px';	
		}	
	})(window,document);
	$("#oP").click(function(){
				
			$(".bj").toggle()
			$(".down").toggle()
			$("#oP").find(".down").toggle()
		})
		$(".down").click(function(){
			$(".bj").css("display","none")
			$(".down").css("display","none")
		})
		$(".bj").click(function(){
			$(".bj").css("display","none")
			$(".down").css("display","none")
		})
	</script>
</html>
